// 中部可以点击的图片

<template>
  <div class="bg">
    <div class="banxin box"> 
        <div v-for="(item,index) in msg" :key="index" class="underbg">
            <img :src="item.imginfo" alt="">
            <div class="imginfo">
                <h2>{{item.title}}</h2>
                <p>{{item.mesiges}}</p>
                <div class="btn">Click Here</div>
            </div>
        </div>
    </div>
    
  </div>
</template>

<script>
export default {
    name : 'centerConcrete',
    data (){
        return {
            
        }
    },
    props : ['msg']
}
</script>

<style scoped lang="less">
    .bg {
        background-color: rgb(206, 221, 182);
        width: 100%;
        min-width: 1002px;
        padding: 50px 0;
        height: 300px;
    }
    .box {
        position: relative;
        height: inherit;
        overflow: hidden;
        .underbg {
            height: inherit;
            img {
            width: 1002px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            }
            .imginfo {
                position: absolute;
                height: inherit;
                width: 1002px;
                top: 0;
                background-color: rgba(36, 32, 32, 0.5);
                color: white;
                font-family: 'myFont';
                h2 {
                    font-size: 45px;
                    text-align: center;
                    line-height: 120px;
                }
                p {
                    margin: 0 auto;
                    margin-bottom: 30px;
                    max-width: 60%;
                    text-align: center;
                }
                .btn {
                    width: 100px;
                    background-color: white;
                    color: black;
                    font-weight: bold;
                    padding: 5px 0;
                    text-align: center;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    border-radius: 3px;
                    font-family: '';
                    cursor: pointer;

                }
            }
        }
    }
</style>